<!-- 登录 -->
<template>
  <div class="login-container">
    <!-- 背景 -->
    <div class="bg"></div>

    <!-- 登录内容区 -->
    <div class="login-box">
      <h2 class="login-title mb20">{{ title }}</h2>

      <!-- 登录表单 -->
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="rules"
        label-width="0"
        status-icon
        v-loading="loading"
        :element-loading-text="loadingText"
        class="login-form"
      >
        <div class="login-content">
          <h3 class="title">登&#x3000;&#x3000;录</h3>
          <el-form-item prop="userName">
            <el-input v-model="loginForm.userName" placeholder="请输入账号">
              <template #prefix>
                <el-icon>
                  <UserFilled />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <div class="line-top"></div>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              show-password
              placeholder="请输入密码"
              @keyup.enter="handleLogin(loginFormRef)"
            >
              <template #prefix>
                <el-icon>
                  <Lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <div class="line-top"></div>
        </div>
        <el-form-item>
          <el-button
            class="login-btn mb30"
            type="primary"
            @click.prevent="handleLogin(loginFormRef)"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { UserFilled, Lock } from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";
import { useRouter } from "vue-router";
// import { login } from "@/api/login";
// import { useUserStore } from "@/store/index";
// const UserStore = useUserStore();

const title = import.meta.env.VITE_APP_TITLE;
const loginFormRef = ref(null);
const loginForm = reactive({
  userName: null,
  password: null,
});
const loading = ref(false);
const loadingText = ref(null);
const rules = reactive({
  userName: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 16, message: "密码长度为6到16位", trigger: "blur" },
  ],
});

const Router = useRouter();
const handleLogin = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      loading.value = true;
      loadingText.value = "正在登录中...";
      ElNotification.success({ message: "登录成功" });
      Router.push({ path: "/" });
      //   await login(loginForm)
      //     .then((res) => {
      //       loading.value = false;
      //       loadingText.value = null;
      //       if (res.code === 0) {
      //         UserStore.setToken(res.data.userName);
      //         UserStore.setUserInfo(res.data);
      //         ElNotification.success({ message: "登录成功" });
      //         Router.push({ path: "/" });
      //       }
      //     })
      //     .catch(() => {
      //       loading.value = false;
      //       loadingText.value = null;
      //     });
      // } else {
      //   ElNotification.error({ message: "请根据验证规则输入" });
      //   return false;
    }
  });
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>